<template>
  <div class="page">
    <div class="handlePart">
      <el-form :inline="true" :model="form">
        <el-form-item label="关键字：">
          <el-input size="small" v-model="form.keywords" placeholder="根据用户名、服务地址模糊检索" clearable></el-input>
        </el-form-item>
        <el-form-item label="日志时间：">
          <el-date-picker size="small"  v-model="date" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="日志级别：">
          <el-select size="small" v-model="form.level" placeholder="全部" clearable>
            <el-option v-for="item in dict.logLevelList" :key="item.dictDetailGuid" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求方式：">
          <el-select size="small" v-model="form.method" placeholder="全部" clearable>
            <el-option v-for="item in dict.methodsList" :key="item.dictDetailGuid" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tablePart">
      <el-table :data="list" :height="'calc(100vh - 290px)'" stripe style="width: 100%">
        <el-table-column label="序号" type="index" align="center" width="55">
        </el-table-column>
        <el-table-column prop="userName" label="用户名" align="center"> </el-table-column>
        <el-table-column label="服务器地址" align="center">
          <template slot-scope="scope">
            <div class="ellipsis" :title="scope.row.url">{{ scope.row.url }}</div>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <div class="ellipsis" :title="scope.row.level">{{ scope.row.level }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="method" label="请求方式" align="center">
        </el-table-column>
        <el-table-column label="描述" align="center">
          <template slot-scope="scope">
            <div class="ellipsis" :title="scope.row.message">{{ scope.row.message }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="90">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view" @click="view(scope.row)" title="详情"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagePart">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <view-dialog ref="viewDialogRef" />
  </div>
</template>
<script>
import viewDialog from './viewDialog.vue';
export default {
  components: { viewDialog },
  data() {
    return {
      form: {
        keywords: '',
        end: '',
        start: '',
        level: '',
        method: '',
      },
      dict: {
        methodsList: [],
        logLevelList: []
      },
      date: [],
      list: [],
      page: 1,
      size: 10,
      total: 0,
    };
  },
  mounted() {
    this.dictInit()
    this.listInit();
  },
  methods: {
    dictInit(){
      // 日志级别
      this.$api.getDictDetail({dicGuid: '1391306321425408'}).then(res => {
        if(res && res.code == 200){
          let data = res.data || []
          this.dict.logLevelList = data
        }
      })
      // 请求方式
      this.$api.getDictDetail({dicGuid: '1391306323522560'}).then(res => {
        if(res && res.code == 200){
          let data = res.data || []
          this.dict.methodsList = data
        }
      })
    },
    listInit() {
      if(this.date && this.date.length){
        this.form.start = this.date[0]
        this.form.end = this.date[1]
      }else {
        this.form.start = ''
        this.form.end = ''
      }
      let params = Object.assign({},this.form,{
        size: this.size,
        page: this.page
      })
      this.$api.getErrorLogList(params).then((res) => {
        if(res && res.code == 200){
          let data = res.data || {}
          this.total = data.total || 0
          this.list = data.list || []
        }
      })
    },
    // 查询
    search(){
      this.listInit()
    },
    view(row) {
      this.$refs.viewDialogRef.showModal(row);
    },
    // size change
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page = 1;
      this.size = val;
      this.listInit();
    },
    // page change
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.listInit();
    },
  },
};
</script>
